<template>
	<view class="indexs">
		<view :class="'header ' + (banertrue ? 'header_lan' : '')" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height"
				:style=" 'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;' ">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo">
						<image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image>
					</view>
					<view class="index_wenben">{{ $t("page_sharing_order_center.Group_square") }} </view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom:130rpx;'">
			<view class="pintuangc_center">
				<view class="pintuangc_item1">
					<view class="pintuangc_item1_input">
						<image :src="imgUrl + '/dzx_img82.png'"></image>
						<input type="text" :placeholder="$t('page_sharing_order_center.placeholder')" />
					</view>
				</view>
				<view class="pintuangc_item2">
					<view class="pintuangc_item2_title">
						<view class="pintuangc_item2_t1">{{ $t("page_sharing_order_center.Hot_country") }}</view>
						<view class="pintuangc_item2_t2">
							<image :src="imgUrl + '/dzx_img83.png'"></image>
							<text @click="selectCountry()">{{ $t("page_sharing_order_center.choose_country") }}</text>
						</view>
					</view>
					<view class="pintuangc_item2_list">
						<view :class="[0 == countryIndex ? 'ons' : '', 'pintuangc_item2_cont']" data-id="0"
							@click="selectCountryed">
							{{ $t("page_sharing_order_center.all") }}
						</view>
						<view :class="[ index + 1 == countryIndex ? 'ons' : '', 'pintuangc_item2_cont', ]"
							v-for="(item, index) in country" :data-id="index + 1" @click="selectCountryed">
							{{ item.title }}
						</view>
					</view>
				</view>
				<view class="pintuangc_item3">
					<view class="index_swiper">
						<!--Tab布局-->
						<view class="index_title">
							<block v-for="(item, Index) in malllist">
								<view :data-id="Index" :class="['mall_dis', Index == currentIndex ? 'mall_on' : '']"
									@click="getcurrentid">
									<view class="mall_t1">{{ item.name }}</view>
								</view>
							</block>
							<view class="mys_xians_po" :style="'width:' + width + 'px;left:' + left + 'px;'">
								<view class="mys_xians"></view>
							</view>
						</view>
						<!--内容布局-->
						<view class="index_list">
							<swiper class="swiper paid_list_cont" @change="pagechange" :style="'height:' + height">
								<block v-for="(item, index) in malllist" :key="index" class="aaaa">
									<swiper-item>
										<view :class="'index_list_heji' + index">
											<view class="pintuan_item4_list">
												<view class="pintuan_item4_cont" :data-id="itemp.order_id"
													@tap="goDetail" v-for="(itemp,index) in list" :key="itemp.order_id">
													<view class="pintuan_item4_top">
														<view class="pintuan_item4_l">
															<image :src="imgUrl + '/dzx_img27.png'"></image>
															<text>{{ itemp.title}}</text>
														</view>
													</view>
													<view class="pintuan_item4_cent" style="margin-top: 24rpx">
														{{ pingtuanrenshu }}
														<text>{{ itemp["max_people"] }}{{ $t("page_sharing_order_center.rentuan") }}</text>
													</view>
													<view class="pintuan_item4_cent">
														{{ shipping_weight }}
														<text>{{ itemp["min_weight"] }}{{ weight_mode.unit }}</text>
													</view>
													<view class="pintuan_item4_cent">
														{{ opening_time }}
														<text>{{ itemp["start_time"] }}</text>
													</view>
													<view class="pintuan_item4_cent">
														{{ receiving_address }}
														<text>{{ itemp.address.country }}-{{ itemp.address.detail }}</text>
													</view>
													<view class="pintuan_item4_bottom">
														<view class="pintuan_item4_b1">
															{{ haichai }}
															<text>{{ itemp["remain_weight"] }}</text>
															{{ weight_mode.unit }}{{ pmhcheng }}
														</view>
														<view class="pintuan_item4_btns">
															{{ pmhtuanzhong }}
														</view>
													</view>
												</view>
											</view>
										</view>
									</swiper-item>
								</block>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/shouye/shouye_zkc/shouye_zkc.js
	const app = getApp();

	let request = require("../../utils/require");

	export default {
		data() {
			const pingtuanrenshu = this.$t("page_sharing_order_center.pingtuanrenshu")
			const shipping_weight = this.$t("page_sharing_order_center.Shipping_weight")
			const opening_time = this.$t("page_sharing_order_center.Opening_time")
			const receiving_address = this.$t("page_sharing_order_center.Receiving_address")
			const haichai = this.$t("page_sharing_order_center.haichai")
			const pmhcheng = this.$t("page_sharing_order_center.pmhcheng")
			const pmhtuanzhong = this.$t("page_sharing_order_center.pmhtuanzhong")
			return {
				navH: app.globalData.navHeight,
				gaodu: app.globalData.height,
				gaodutops: app.globalData.top,
				imgUrl: app.globalData.imgUrl,
				urlimg: app.globalData.urlimg,
				malllist: [{
						id: 1,
						type: "new",
						name: "最新"
					},
					{
						id: 2,
						type: "recommend",
						name: "推荐"
					},
				],
				height: 0,
				heights: 0,
				country_id: 0,
				currentIndex: 0,
				left: 16,
				weight_mode: uni.getStorageSync("weight_mode"),
				false: false,
				width: 0,
				country: [],
				list: [],
				countryIndex: 0,
				//0是待付款，1是待审核，2是待发货，3是已发货，4是已完成
				pingtuanrenshu,
				shipping_weight,
				opening_time,
				receiving_address,
				haichai,
				pmhcheng,
				pmhtuanzhong,
				banertrue:false,
			};
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.navH + 50) {
				this.banertrue= true
			} else {
				this.banertrue= false
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			var that = this;
			that.ids= options.order_id
			this.getHotCountry();
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.guojiaid == undefined || currPage.guojianame == "") {} else {
				this.country_id = currPage.guojiaid;
				this.guojianame= currPage.guojianame,
				console.log(this.form, "this.form");
			}
			this.getList();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			jumpzuo() {
				uni.navigateBack();
			},
			selectCountry() {
				uni.navigateTo({
					url: "/pages/indexs/baoguoyg_guojia/baoguoyg_guojia",
				});
			},
			goDetail(e) {
				console.log(e, "e");
				uni.navigateTo({
					url: "/pages/sharing/sharing_order_detail_join?order_id=" +
						e.currentTarget.dataset.id,
				});
			},
			getHotCountry() {
				var that = this;
				var data = {
					token: uni.getStorageSync("token"),
				};
				request
					.get(
						`index.php?s=/api/sharp.order/getHotCountry&wxapp_id=` +
						uni.getStorageSync("web_id"),
						data
					)
					.then((res) => {
						if (res.data.code == 1) {
							this.country = res.data.data.data;
						}
					});
			},
			getList() {
				var that = this;
				var data = {
					type: this.malllist[this.currentIndex]["type"],
					token: uni.getStorageSync("token"),
					country_id: this.countryIndex == 0 ?
						0 : this.country[this.countryIndex - 1]["id"],
				};
				request.get(`index.php?s=/api/sharp.order/center&wxapp_id=` +uni.getStorageSync("web_id"),data).then((res) => {
						if (res.data.code == 1) {
							this.list = res.data.data.list.data;
						}
						console.log(this.list,9999999)
						setTimeout(() => {
							that.swiperhegiht(this.currentIndex);
						}, 300);
					});
			},
			//swiper选项卡的高度
			swiperhegiht(es) {
				var that = this;
				var query = uni.createSelectorQuery(this);
				query.selectAll(".index_list_heji" + es).boundingClientRect();
				query.exec((res) => {
					console.log(res,98898);
					if(res[0] &&　res[0][0]){
						var listHeight = res[0][0].height;
						that.height= listHeight + "px"
						that.heights= res[0]
					}
				
				});
			},
			//swiper切换时会调用
			pagechange: function(e) {
				var that = this;
				that.currentIndex= e.detail.current
				setTimeout(() => {
					that.swiperhegiht(e.detail.current);
					that.changeline();
				}, 100);
			},
			//swiper单击事件
			getcurrentid(e) {
				this.currentIndex= e.currentTarget.dataset.id
				this.getList();
			},
			selectCountryed(e) {
				this.countryIndex= e.currentTarget.dataset.id
				this.getList();
			},
			
			//下标线左右滑动效果
			changeline: function(e) {
				const query = uni.createSelectorQuery();
				var _this = this;
				console.log(e);
				query.select(".mall_on").boundingClientRect();
				query.exec(function(res) {
					console.log(res, "????");
					if (res[0] != null) {
						_this.left= res[0].left
						_this.width= res[0].width
					} else {
						_this.left = 0
					}
				});
			},
		},
	};
</script>
<style>
	@import "./sharing_order_center.css";
</style>